<template>
	<view class="container">
		<view class="search d-rn d-ac">
			<image src="../../static/img/search.png" mode=""></image>
			<input type="text" :placeholder="$t('Please_enter_name')" @blur="search" placeholder-style="color:#CCCCCC;"
				v-model="type.createdName">
		</view>
		<view class="content">
			<!-- <view class="content-tab d-rn d-ac d-ja">
				<view class="content-tab-one d-cw d-ac d-jc" v-for="(item,index) in 4" :key="index" @click="handleNav(index)">
					<text :class="navSts == index?'active':'outactive'">{{!index?'待审批':index==1?'审核中':index==2?'同意':'拒绝'}}</text>
					<text v-if="navSts == index"></text>
				</view>
			</view> -->
			<view class="content-select d-rn d-ac d-jb">
				<view class="content-select-one d-rn d-ac d-jc">
					<picker @change="bindPickerChangeSts" :range="stsList" range-key="dictLabel" class="picker">
						<view class="d-rn d-ac d-jc">
							<view class="picker-con d-cn d-jc d-ac">
								<view class="uni-input one-txt-cut" v-if="stateName">{{stateName}}
								</view>
								<view class="uni-input one-txt-cut" v-else>{{ $t('all_status') }}</view>
							</view>
							<image src="../../static/img/bottom.png" mode="" class="bottom"></image>
						</view>
					</picker>

				</view>
				<view class="content-select-shu">
					|
				</view>
				<view class="content-select-one">
					<picker @change="bindPickerChange" :range="hostList" range-key="dictLabel" class="picker">
						<view class="d-rn d-ac d-jc">
							<view class="picker-con d-cn d-jc">
								<view class="uni-input one-txt-cut" v-if="approvalTypeName">{{approvalTypeName}}
								</view>
								<view class="uni-input one-txt-cut" v-else>{{ $t('all_types') }}</view>
							</view>
							<image src="../../static/img/bottom.png" mode="" class="bottom"></image>
						</view>
					</picker>
				</view>
				<view class="content-select-shu">
					|
				</view>
				<view class="content-select-two d-rn d-ac d-jc">
					<view class="content-select-top-one-right d-rn d-ac" @click="handleOpenTime">
						<text v-if="type.createTime">{{type.createTime}}</text>
						<text v-else>{{ $t('time') }}</text>
						<image src="../../static/img/bottom.png" mode="" class="bottom"></image>
					</view>
				</view>
			</view>
		</view>

		<view class="list">
			<view class="" v-for="(item,index) in shenpiList" :key="index" v-if="shenpiList && shenpiList.length"
				@click="handleGo(item)">
				<view class="list-one" v-if="item.type==1">
					<view class="list-one-one">
						<view class="list-one-one-title d-rn d-ac d-jb">
							<view class="list-one-one-title-left d-rn d-ac">
								<text>{{item.employerName}}{{$t('of')}}{{item.typeName}}</text>
								<text v-if="item.roleName || item.deptName">{{item.roleName}}/{{item.deptName}}</text>
								<text><span v-if="item.positionName"></span><span
										v-if="item.positionName && item.employerDeptName">/</span><span
										v-if="item.employerDeptName">{{item.employerDeptName}}</span></text>
							</view>
							<view class="list-one-one-title-right">
								<text>{{item.createTime}}</text>
							</view>
						</view>
						<view class="list-one-one-content d-cn">
							<text>{{item.jqEmployerLeaveDTO && item.jqEmployerLeaveDTO.vacationName}} <text
									v-if="item.jqEmployerLeaveDTO && item.jqEmployerLeaveDTO.leaveDays">{{item.jqEmployerLeaveDTO && 	item.jqEmployerLeaveDTO.leaveDays}} {{ $t('days') }} </text></text>
							<text v-if="item.jqEmployerLeaveDTO && item.jqEmployerLeaveDTO.leaveStartDate">{{$t('start_time')}}：{{item.jqEmployerLeaveDTO.leaveStartDate}}</text>
							<text v-if="item.jqEmployerLeaveDTO && item.jqEmployerLeaveDTO.leaveEndDate">{{$t('end_time')}}：{{item.jqEmployerLeaveDTO.leaveEndDate}}</text>
							<text class="txt-cut"
								v-if='item.jqEmployerLeaveDTO && item.jqEmployerLeaveDTO.leaveReason'>{{$t('reason')}}：{{item.jqEmployerLeaveDTO.leaveReason}}</text>
							<image :src="item.jqEmployerLeaveDTO && item.jqEmployerLeaveDTO.leaveFile" mode="widthFix" style="width: 100%;"
								v-if="item.jqEmployerLeaveDTO && item.jqEmployerLeaveDTO.leaveFile"></image>
							<!-- <text style="color: #1c77d4;cursor: pointer;">{{item.leaveFile}}</text> -->
						</view>
						<view class="list-one-one-sts d-rn d-ac d-jb">
							<text></text>
							<!-- <text>{{!item.state?'待审批':item.state==1?'审核中':item.state==2?'同意':item.state==3?'拒绝':''}}</text> -->
							<!-- <text v-if="!item.state" style="color: #FF4B50;">待审批</text>
							<text v-if="item.state==1" style="color: dodgerblue;">审核中</text>
							<text v-if="item.state==2" style="color: lightgreen;">同意</text>
							<text v-if="item.state==3" style="color: orangered;">拒绝</text> -->
						<!-- 	<text v-if="item.status == 0"
								:style="{'color': item.reviewerType!=2?'#ff4b50':'lightgreen'}">{{ item.reviewerType==2?'抄送':'审核中' }}</text> -->
							<text v-if="item.status == 0" style="color: dodgerblue">{{ $t('reviewing') }}</text>
							<text v-if="item.status == 2" style="color: lightgreen">{{ $t('agree') }}</text>
							<text v-if="item.status == 3" style="color: orangered">{{ $t('reject') }}</text>
							<text v-if="item.status == 4" style="color: dodgerblue">{{ $t('canceled') }}</text>
						</view>
					</view>
				</view>
			</view>
			<view v-if="shenpiList.length==0" style="margin-top: 200rpx;">
				<u-empty mode="data"></u-empty>
			</view>
		</view>

		<view class="">
			<u-datetime-picker :show="showTime" v-model="value" mode="date" @cancel="handleCancel"
				@confirm="handleChooseTime"></u-datetime-picker>
		</view>
		<approve v-if="approveStr"></approve>
	</view>
</template>

<script>
	var _self
	import {
		getApplyList,
		getPersonHolidays
	} from '../../api/index.js'
	import {
		getDictionary
	} from "../../api/common.js"
	export default {
		props:{
			approveStatus:{
				type:Boolean,
			}
		},
		data() {
			return {
				showTime: false,
				value: Number(new Date()),
				updateTime: this.$t('time'),
				stsList: [{
						dictLabel: this.$t('all'),
						dictValue: ''
					},

					{
						dictLabel: this.$t('pending_review'),
						dictValue: 0
					},
					{
						dictLabel: this.$t('under_review'),
						dictValue: 1
					},
					{
						dictLabel: this.$t('approved'),
						dictValue: 2
					},
					{
						dictLabel: this.$t('rejected'),
						dictValue: 3
					},
					{
						dictLabel: this.$t('canceled'),
						dictValue: 4
					}
				],
				hostList: [{
						dictLabel: this.$t('all'),
						dictValue: '1,2'
					},

					{
						dictLabel: this.$t('leave'),
						dictValue: 1
					},
					{
						dictLabel: this.$t('cancel_vacation'),
						dictValue: 2
					}
				],
				type: {
					state: '',
					createdName: null,
					pageNum: 1,
					pageSize: 10,
					createTime: null,
					type: null,
				},
				approvalTypeName: '',
				stateName: '',
				navSts: 0,
				shenpiList: [],
				hasPage: false,
				total: 0,
				totalPage: 0,
				approveStr: false,
			}
		},
		onLoad() {

		},
		onShow() {
			// 审批状态
			// this.getDictionary()
			//审批类型
			this.getDictEvent()
			this.getgetApplyList()
		},
		mounted() {
			console.log('-------------------')

			_self = this;
			//审批类型
			// this.getDictEvent()
			
			_self.getgetApplyList()
		},
		methods: {
			//审批状态
			// getDictionary() {
			// 	getDictionary('approval_status').then(res => {
			// 		if (res.code == 200) {
			// 			this.stsList = res.data
			// 		}
			// 	})
			// },
			// //审批类型
			// getDictEvent() {
			// 	getDictionary('approval_event').then(res => {
			// 		if (res.code == 200) {
			// 			this.hostList = res.data;
			// 		}
			// 	})
			// },
			bindPickerChange(e) {
				_self.type.pageNum = 1
				_self.hasPage = false;
				_self.approvalTypeName = _self.hostList[e.detail.value].dictLabel
				_self.type.type = _self.hostList[e.detail.value].dictValue
				_self.getgetApplyList()
			},
			bindPickerChangeSts(e) {
				_self.type.pageNum = 1
				_self.hasPage = false;
				_self.type.state = _self.stsList[e.detail.value].dictValue
				_self.stateName = _self.stsList[e.detail.value].dictLabel
				_self.getgetApplyList()

			},
			handleNav(index) {
				_self.hasPage = false;
				_self.type.pageNum = 1
				_self.navSts = index
				_self.type.state = index
				_self.getgetApplyList()
			},

			getgetApplyList() {
				_self.$commonFun.sLoad()
				let data = {
					pageSize: 999,
					pageNum: 1,
					employeeName: this.type.createdName,
					status: this.type.state,
					type: this.type.type,
					dateStart: this.type.createTime,
					dateEnd: this.type.createTime,
				}
				getApplyList(data).then(res => {
						console.log('res',res)
					if (res.code == 200) {
						if(this.approveStatus){
							_self.shenpiList = res.data.records.filter(v=>v.type==1);
						}else{
							_self.shenpiList = res.data.records.filter(v=>v.reviewerType==1 && v.status == 0);
						}
						
						console.log("🐛 ~ getApplyList ~ _self.shenpiList:", _self.shenpiList)
						// if(_self.type.pageNum == 1){
						// 	_self.shenpiList = res.data.records;
						// }else{
						// 	_self.shenpiList = [..._self.shenpiList,...res.data.records];
						// }
						// _self.total = res.total;
						// _self.totalPage = _self.type.pageNum * _self.pageSize
						// if (_self.totalPage >= res.total) {
						// 	_self.hasPage = false
						// } else {
						// 	_self.hasPage = true
						// }
					}
					uni.hideLoading()
				})
			},
			handleOpenTime() {
				_self.showTime = true
			},

			handleChooseTime(e) {
				_self.type.pageNum = 1
				_self.showTime = false
				_self.hasPage = false;
				_self.type.createTime = _self.$commonFun.timestampToTimeB(e.value)
				console.log(e, 2)
				// _self.type.createTime =  e.detail.value
				_self.getgetApplyList()
			},
			handleCancel() {
				_self.showTime = false
			},
			handleGo(item) {
				_self.$commonFun.goUrl(1, '../approvalDetails/index', item)
			},

			search() {
				_self.type.pageNum = 1
				_self.getgetApplyList()
			},


		},
		onReachBottom() {
			if (_self.hasPage) {
				_self.type.pageNum++;
				_self.hasPage = false;
				_self.getgetApplyList()
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F5F5F5;
	}

	.container {
		width: 100%;

		.search {
			width: 90%;
			margin: 20rpx auto;
			background-color: #ffffff;
			border-radius: 2em;
			padding: 18rpx 34rpx;
			box-sizing: border-box;

			image {
				width: 28rpx;
				height: 28rpx;
				min-height: 28rpx;
				min-width: 28rpx;
				margin-right: 20rpx;
			}

			input {
				width: 100%;
				flex: 1;
				font-size: 26rpx;
				color: #cccccc;
			}
		}

		.content {
			width: 100%;
			background-color: #ffffff;

			&-tab {
				padding: 24rpx 0;
				box-sizing: border-box;
				position: relative;
				border-bottom: 1px solid #F5F5F5;

				text:nth-of-type(1) {
					font-size: 30rpx;
				}

				text:nth-of-type(2) {
					width: 138rpx;
					height: 4rpx;
					background-color: #FDB911;
					position: absolute;
					top: 93%;
				}

				.active {
					color: #333333;
					font-weight: 500;
				}

				.outactive {
					color: #999999;
				}
			}

			&-select {
				&-one {
					width: 24%;
					padding: 22rpx 0;
					box-sizing: border-box;

					.bottom {
						width: 12rpx;
						height: 7rpx;
						margin-left: 10rpx;
					}
				}

				&-shu {
					color: #EEEEEE;
				}

				&-two {
					width: 56%;
					padding: 22rpx 0;
					box-sizing: border-box;

					.bottom {
						width: 12rpx;
						height: 7rpx;
						margin-left: 10rpx;
					}
				}
			}


		}

		.form {
			width: 100%;
			background-color: #ffffff;
			margin-top: 20rpx;

			&-one {
				padding: 25rpx;
				box-sizing: border-box;
				border-bottom: 1px solid #F5F5F5;

				.text {
					font-size: 28rpx;
					color: #6c6c6c;
				}

				.text2 {
					font-size: 28rpx;
				}

				.uni-input {
					font-size: 28rpx;
				}
			}

			&-two {
				padding: 25rpx;
				box-sizing: border-box;
				border-bottom: 1px solid #F5F5F5;

				text {
					font-size: 28rpx;
					color: #6c6c6c;
				}

				input {
					font-size: 28rpx;
					color: #CCCCCC;
					margin-top: 16rpx;
				}
			}
		}

		.list {
			width: 94%;
			margin: 24rpx auto;

			&-one {
				background-color: #ffffff;
				padding: 24rpx;
				box-sizing: border-box;
				margin-bottom: 24rpx;
				border-radius: 12rpx;

				&-one {
					&-title {
						margin-bottom: 16rpx;

						&-left {
							text:nth-of-type(1) {
								font-size: 30rpx;
								// font-weight: bold;
								color: #333333;
								margin-right: 20rpx;
							}

							text:nth-of-type(2) {
								padding: 6rpx;
								box-sizing: border-box;
								font-size: 20rpx;
								font-weight: bold;
								color: #FF8F1F;
								background-color: #FFEFDF;
								border-radius: 12rpx;
							}
						}

						&-right {
							text {
								color: #CCCCCC;
								font-size: 24rpx;
							}
						}
					}

					&-content {
						padding-bottom: 24rpx;
						border-bottom: 1px dashed #D2D2D2;

						text {
							margin-bottom: 10rpx;
							color: #999999;
						}
					}

					&-sts {
						padding-top: 24rpx;
						box-sizing: border-box;

						text {
							font-weight: bold;
						}

						.activetext {
							color: #FFFFFF;
						}
					}

				}
			}
		}







	}
</style>